<template>
    <div class="profile-card">
        <!-- 左侧头像区域 -->
        <div class="avatar-section">
            <div class="avatar-wrapper">
                <el-avatar :size="100" :src="userInfo.avatar" />
                <img v-if="true" class="vip-badge" src="/public/favicon.ico" alt="VIP" />
            </div>
        </div>

        <!-- 右侧信息区域 -->
        <div class="info-section">
            <!-- 在模板中也需要修改 -->
            <div class="username-row">
                <h2 class="username">{{ userInfo.nickname }}</h2>
                <div class="badges">
                    <el-tag size="small" type="success">V1</el-tag>
                    <el-icon>
                        <World />
                    </el-icon> <!-- 改为 World -->
                </div>
                <el-icon class="share-icon">
                    <Share />
                </el-icon>
            </div>

            <!-- 个人简介 -->
            <div class="bio">{{ userInfo.introduce }}</div>

            <!-- 用户信息标签组 -->
            <div class="info-tags">
                <el-tag type="info" class="info-tag">
                    <el-icon>
                        <Male />
                    </el-icon>
                    {{  getGandar(userInfo.gander)}}
                </el-tag>
                <el-tag type="info" class="info-tag">
                    <el-icon>
                        <Location />
                    </el-icon>
                    {{ '地球' }}
                </el-tag>
                <el-tag type="info" class="info-tag">
                    <el-icon>
                        <Monitor />
                    </el-icon>
                    {{ '后端' }}
                </el-tag>
                <el-tag type="info" class="info-tag">
                    <el-icon>
                        <Calendar />
                    </el-icon>
                    {{ '毕业年份' }}
                </el-tag>
                <el-tag type="info" class="info-tag">
                    <el-icon>
                        <School />
                    </el-icon>
                    {{ '随便一所大学' }}
                </el-tag>
                <el-tag type="info" class="info-tag">
                    <el-icon>
                        <Cpu />
                    </el-icon>
                    {{ '???' }}
                </el-tag>
            </div>

            <!-- 统计数据 -->
            <div class="stats">
                <div class="stat-item">
                    <span class="stat-value">{{ '999+' }}</span>
                    <span class="stat-label">排名</span>
                </div>
                <div class="stat-item">
                    <span class="stat-value">{{ 0 }}</span>
                    <span class="stat-label">积分</span>
                </div>
                <div class="stat-item">
                    <span class="stat-value">{{ 0 }}</span>
                    <span class="stat-label">获赞</span>
                </div>
                <div class="stat-item">
                    <span class="stat-value">{{ 0 }}</span>
                    <span class="stat-label">浏览量</span>
                </div>
                <div class="stat-item">
                    <span class="stat-value">{{ 0 }}</span>
                    <span class="stat-label">关注</span>
                </div>
                <div class="stat-item">
                    <span class="stat-value">{{ 0 }}</span>
                    <span class="stat-label">粉丝</span>
                </div>
            </div>

            <!-- 操作按钮 -->
            <div class="action-buttons">
                <el-button type="primary" @click="handleEdit">修改资料</el-button>
                <el-button type="primary">批量导入文章</el-button>
                <el-button type="danger" @click="handleLogout" :loading="isLoggingOut" :disabled="isLoggingOut">
                    退出登录
                </el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {
    Male,
    Location,
    Monitor,
    Calendar,
    School,
    Cpu,
    Share
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/userStores'
import { storeToRefs } from 'pinia'
import { PageConstant, getGandar } from '@/common/Constant'


const userStore = useUserStore();
// 用户信息
const {userInfo} = storeToRefs(userStore);

// 退出登录
const {userLogout} = userStore;

// 路由实例
const router = useRouter()

// 跳转到个人信息编辑页面
const handleEdit = () => {
    router.push(PageConstant.ProfileEditPage);
}

// 请求标志位
const isLoggingOut = ref(false)


const handleLogout = async () => {
    if (isLoggingOut.value) return

    try {
        isLoggingOut.value = true
        await userLogout();
        router.replace(PageConstant.LoginPage);
    } catch (error) {
        ElMessage.error('退出登录失败');
    } finally {
        isLoggingOut.value = false
    }
}

</script>

<style scoped>
.profile-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    gap: 24px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.avatar-section {
    position: relative;
}

.avatar-wrapper {
    position: relative;
}

.vip-badge {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 24px;
    height: 24px;
}

.info-section {
    flex: 1;
}

.username-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.username {
    margin: 0;
    font-size: 24px;
}

.badges {
    display: flex;
    align-items: center;
    gap: 8px;
}

.share-icon {
    margin-left: auto;
    cursor: pointer;
    font-size: 20px;
    color: #909399;
}

.bio {
    color: #606266;
    margin-bottom: 16px;
}

.info-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.info-tag {
    display: flex;
    align-items: center;
    gap: 4px;
}

.stats {
    display: flex;
    gap: 24px;
    margin-bottom: 20px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-value {
    font-size: 20px;
    font-weight: bold;
    color: #303133;
}

.stat-label {
    font-size: 14px;
    color: #909399;
}

.action-buttons {
    display: flex;
    gap: 12px;
}
</style>